import 'package:flutter/material.dart';
import 'package:ui_templates/navigation_home.dart';

class CenterNextButton extends StatefulWidget {
  const CenterNextButton(
      {super.key,
      required this.animationController,
      required this.centerOnTap});

  final AnimationController animationController;
  final void Function() centerOnTap;

  @override
  State<CenterNextButton> createState() => _CenterNextButtonState();
}

class _CenterNextButtonState extends State<CenterNextButton> {
  bool isShowBtn = false;
  int pageIndex = 0;

  @override
  void initState() {
    // TODO: implement initState
    widget.animationController.addListener(() {
      var value = widget.animationController.value;

      if (value < 0.1) {
        setState(() {
          isShowBtn = false;
          pageIndex = 0;
        });
      } else {
        setState(() {
          isShowBtn = true;
        });
      }
      if (value >= 0.1 && value < 0.3) {
        setState(() {
          pageIndex = 0;
        });
      } else if (value >= 0.3 && value <= 0.5) {
        setState(() {
          pageIndex = 1;
        });
      } else if (value >= 0.5 && value <= 0.7) {
        setState(() {
          pageIndex = 2;
        });
      } else if (value >= 0.7 && value <= 0.9) {
        setState(() {
          pageIndex = 3;
        });
      }
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    /*
    * Container(
        width: 200,
        height: 50,
        child: Padding(
          padding: EdgeInsets.symmetric(horizontal: 10),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              const Text(
                "sign up",
                style: TextStyle(
                  fontSize: 16,
                  color: Colors.white,
                ),
              ),
              IconButton(
                color: Colors.white,
                onPressed: () {},
                icon: const Icon(Icons.arrow_forward_rounded),
              ),
            ],
          ),
        ),
      )
    Material(
      color: Colors.black,
      borderRadius: BorderRadius.circular(30),
      child: Container(
        width: 60,
        height: 60,
        child: InkWell(
          borderRadius: BorderRadius.circular(30),
          splashColor: Colors.blue,
          highlightColor: Colors.blue.withOpacity(.6),
          onTap: widget.centerOnTap,
          child: const Icon(Icons.arrow_forward_ios_rounded,
              color: Colors.white),
        ),
      ),
    ),
                * */
    Animation<double> signWidthAnimation = Tween<double>(begin: 60, end: 200)
        .chain(CurveTween(curve: Curves.easeInOut))
        .chain(CurveTween(curve: const Interval(0.6, 0.8)))
        .animate(widget.animationController);

    Animation<double> signHeightAnimation = Tween<double>(begin: 60, end: 50)
        .chain(CurveTween(curve: Curves.easeInOut))
        .chain(CurveTween(curve: const Interval(0.6, 0.8)))
        .animate(widget.animationController);
    Animation<Offset> signMoveAnimation =
        Tween(begin: const Offset(0, 0), end: (const Offset(0, 0.5)))
            .chain(CurveTween(curve: Curves.fastOutSlowIn))
            .chain(CurveTween(curve: const Interval(0.6, 0.8)))
            .animate(widget.animationController);
    Animation<Offset> loginMove =
        Tween(begin: const Offset(0, 2), end: (const Offset(0, 0.8)))
            .chain(CurveTween(curve: Curves.fastOutSlowIn))
            .chain(CurveTween(curve: const Interval(0.6, 0.8)))
            .animate(widget.animationController);
    return Align(
      alignment: Alignment.bottomCenter,
      child: Container(
        width: double.infinity,
        height: 250,
        alignment: Alignment.center,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            AnimatedOpacity(
              duration: const Duration(milliseconds: 1200),
              opacity: isShowBtn ? 1.0 : 0,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                //因为这边没有暂停,循环等功能,只有颜色的变化,可以采用全自动动画
                children: List.generate(4, (index) {
                  print("index:$index,pageIndex:$pageIndex");
                  return Padding(
                    padding: const EdgeInsets.all(4.0),
                    //对于animatedContainer中的child是没有动画效果的
                    child: AnimatedContainer(
                      duration: const Duration(milliseconds: 500),
                      height: 12,
                      width: 12,
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(6),
                        color: pageIndex == index ? Colors.black : Colors.white,
                      ),
                    ),
                  );
                }),
              ),
            ),
            const SizedBox(height: 30),
            if (isShowBtn)
              TweenAnimationBuilder(
                  duration: const Duration(seconds: 3),
                  tween: Tween<double>(begin: 0, end: 1),
                  builder: (context, value, child) {
                    return Opacity(
                      opacity: value,
                      child: SlideTransition(
                        position: signMoveAnimation,
                        child: Material(
                          color: Colors.black,
                          borderRadius: BorderRadius.circular(30),
                          child: AnimatedBuilder(
                              animation: signWidthAnimation,
                              builder: (context, Widget? child) {
                                return AnimatedBuilder(
                                    animation: signHeightAnimation,
                                    builder: (context, child) {
                                      return Container(
                                          width: signWidthAnimation.value,
                                          height: signHeightAnimation.value,
                                          child: AnimatedSwitcher(
                                            duration:
                                                const Duration(seconds: 3),
                                            child: widget.animationController
                                                        .value <
                                                    0.7
                                                ? InkWell(
                                                    key: const ValueKey(
                                                        "forward"),
                                                    borderRadius:
                                                        BorderRadius.circular(
                                                            30),
                                                    splashColor: Colors.blue,
                                                    highlightColor: Colors.blue
                                                        .withOpacity(.6),
                                                    onTap: widget.centerOnTap,
                                                    child: const Icon(
                                                        Icons
                                                            .arrow_forward_ios_rounded,
                                                        color: Colors.white),
                                                  )
                                                : InkWell(
                                                    key: const ValueKey("sign"),
                                                    onTap: () {
                                                      Navigator.of(context).push(
                                                          MaterialPageRoute(
                                                              builder:
                                                                  (context) {
                                                        return const NavigationHome();
                                                      }));
                                                    },
                                                    child: Padding(
                                                      padding: const EdgeInsets
                                                              .symmetric(
                                                          horizontal: 10),
                                                      child: Row(
                                                        mainAxisAlignment:
                                                            MainAxisAlignment
                                                                .spaceBetween,
                                                        children: [
                                                          const Text(
                                                            "sign up",
                                                            style: TextStyle(
                                                              fontSize: 16,
                                                              color:
                                                                  Colors.white,
                                                            ),
                                                          ),
                                                          IconButton(
                                                            color: Colors.white,
                                                            onPressed: () {},
                                                            icon: const Icon(Icons
                                                                .arrow_forward_rounded),
                                                          ),
                                                        ],
                                                      ),
                                                    )),
                                          ));
                                    });
                              }),
                        ),
                      ),
                    );
                  }),
            SlideTransition(
              position: loginMove,
              child: Padding(
                padding: const EdgeInsets.all(8),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    const Text("Already hava an account?"),
                    TextButton(
                      child: const Text(
                        "Login",
                        style: TextStyle(fontWeight: FontWeight.bold),
                      ),
                      onPressed: () {},
                    )
                  ],
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}
